<template>
  <div id="mesprocessflowbasic-preview">
    <el-dialog title="工艺路线单工序预览" :visible.sync="dialogTableVisible">
      <el-table
       :data="dataList"
       height="250px"
       border
       stripe
       :span-method="objectSpanMethod"
       v-loading="dataListLoading"
       style="width: 100%;">
        <el-table-column
          prop="parentWorkingProcedureName"
          header-align="center"
          align="center"
          width="30"
          label="">
        </el-table-column>
        <el-table-column
          prop="workingProcedureName"
          header-align="center"
          align="left"
          width="150px"
          label="工序名称">
        </el-table-column>
        <el-table-column
          prop="workingProcedureProperty"
          header-align="center"
          align="left"
          label="工序性质">
        </el-table-column>
        <el-table-column
          prop="equipmentCode"
          header-align="center"
          align="left"
          label="设备">
        </el-table-column>
        <el-table-column
          prop="enabledFlgName"
          header-align="center"
          width="80px"
          align="center"
          label="是否启用">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="dialogTableVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      dialogTableVisible: false,
      dataList: [],
      workingProcedureNumList: [],
      dataListLoading: false,
      spanArr: [] // 合并单元格数组
    }
  },
  methods: {
    // 初始化页面
    init() {
      this.dataListLoading = true
      this.dialogTableVisible = true
      this.workingProcedureNumList = this.value
      this.$http({
        url: this.$http.adornUrl('/basic/mesprocessflowbasic/workingprocedurepreview'),
        method: 'post',
        data: this.$http.adornData(this.workingProcedureNumList, false)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.spanArr = [] // 页码改变时清空，重新push
          this.rowMergeArr()
        } else {
        }
        this.dataListLoading = false
      })
    },
    //获取合并表格单元格数组方法
    rowMergeArr() {
      let contactDot = 0
      this.dataList.forEach((item, index) => {
        item.index = index
        if (index === 0) {
          this.spanArr.push(1)
        } else {
          if (
            item.parentWorkingProcedureNum ===
              this.dataList[index - 1].parentWorkingProcedureNum &&
            item.parentWorkingProcedureNum !== ''
          ) {
            this.spanArr[contactDot] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            contactDot = index
          }
        }
      })
    },
    //合并element表格单元格方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>